<template>
  <div v-loading="loading" class="home" style="height: 100%;">
    <div class="left" style="width:300px;margin-bottom:20px;">
      <el-input size="mini" v-model="search.ad_source_name" placeholder="请输入名称"></el-input>
      <el-button size="mini" @click="pageInfoReload()" style="margin-left:10px;">搜索</el-button>
      <el-button size="mini" @click="dialogVisible = true" style="margin-left:10px;" type="primary">创建素材</el-button>
    </div>
    <div style="height: 100%;">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%">
        <el-table-column
          prop="ad_source_name"
          label="素材名称"
          >
        </el-table-column>
        <el-table-column
          prop="ad_source_type"
          label="素材类型"
          >
        </el-table-column>
        <el-table-column
          label="素材预览"
          >
          <template #default="scope">
            <el-button @click="openPage(scope.row.ad_source_url)" type="text" size="small">{{scope.row.ad_source_name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          >
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template #default="scope">
            <el-button @click="editAdSource(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteAdSource(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleChange"
        :total="total"
        :page-size="per"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="添加广告素材"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <div class="bt hc" style="height:50px;">
        <div style="width:100px;">素材名称</div>
        <el-input class="flex1" v-model="form.ad_source_name" placeholder="请输入内容"></el-input>
      </div>
      <div class="bt hc" style="height:50px;">
        <div style="width:100px;">素材类型</div>
        <div class="flex1">
          <el-radio v-model="form.ad_source_type" label="video">视频</el-radio>
          <el-radio v-model="form.ad_source_type" label="image">图片</el-radio>
        </div>
      </div>
      <div style="width:100px;">素材地址</div>
      <div class="bt hc" style="height:50px;">
        <div style="width:100px;color:#a8a8a8;">已有地址</div> 
        <el-input class="flex1" v-model="form.ad_source_url" placeholder="请输入内容"></el-input>
      </div>
      <!-- <div class="bt">
        <div style="width:100px;">文件上传</div> <el-input v-model="form.ad_source_name" placeholder="请输入内容"></el-input>
      </div> -->
      <div class="bt hc" style="height:50px;">
        <div style="width:100px;">备注</div>
        <el-input class="flex1" v-model="form.remark" placeholder="请输入内容"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSure()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'

export default defineComponent({

  setup(props) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      loading: true,
      search: {},
      form: {},
      page: 1,
      per: 10,
      tableData: [],
      dialogVisible: false,
      total: 0
    })
    onMounted(()=>{
      pageInfoReload()
    })
    const editAdSource = row => {
      data.form = row;
      data.dialogVisible = true;
    }
    const adSourceUpdate = async () => {
      data.loading = true;
      await proxy.$post("v1/ad_source/update", data.form);
      data.loading = false;
      data.dialogVisible = false;
      pageInfoReload()
      proxy.$message("更新成功");
    }
    const handleClose = done => {}
    const pageInfoReload = async () =>{
      data.loading = true;
      let res = await proxy.$get('v1/ad_source/list',{...data.search,page:data.page,per:data.per});
      data.loading = false;
      data.tableData = res.data.list;
      data.total = res.data.count;
    }
    const onSure = () => {
      if (data.form.id) {
        adSourceUpdate()
      }else{
        adSourceCreate()
      }
    }
    const adSourceCreate = async () => {
      data.loading = true;
      await proxy.$post('v1/ad_source/create',data.form);
      data.loading = false;
      data.dialogVisible=false;
      data.form = {};
      await pageInfoReload()
      proxy.$message("添加成功");
    }
    const gotoPage = url => {
      if (url) {
        window.location.href = url
      }
    }
    const deleteAdSource = async ad => {
      data.loading = true;
      await proxy.$post("v1/ad_source/delete", { id: ad.id });
      data.loading = false;
      pageInfoReload();
    }
    const handleChange = value => {
      data.page = value;
      pageInfoReload();
    }
    const openPage = url => {
      if (url) {
        window.open(url)
      }
    }

    return {
      ...toRefs(data),
      editAdSource,
      adSourceUpdate,
      handleClose,
      openPage,
      handleChange,
      deleteAdSource,
      gotoPage,
      adSourceCreate,
      onSure,
    };

  }
})

</script>